<template>
  <!-- layouts整体外部 -->
  <div class="vue-element-admin-warp">
    <!-- 左侧菜单区域 -->
    <SideBar></SideBar>

    <div class="main" :class="collapse ? 'is-collapse-main' : ''">
      <!-- 头部导航区域 -->
      <NavBar></NavBar>
      <MainContent></MainContent>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { SideBar, NavBar, MainContent } from "./components";
export default {
  components: {
    SideBar,
    NavBar,
    MainContent
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      collapse: "settings/collapse"
    })
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.vue-element-admin-warp {
  position: relative;
  width: 100%;
  height: 100%;

  .main {
    padding-top: $base-top-bar-height;
    position: relative;
    min-height: 100%;
    margin-left: $base-left-menu-width;
    background: #f6f8f9;
    transition: $base-transition;
    &.is-collapse-main {
      margin-left: $base-left-menu-width-min;
    }
  }
}
</style>
